<template>
  <div style="overflow: hidden">

    <main v-if="!isDetails" style="overflow: hidden">
      <div @click="getDetails(item.id)"  :class="'recBox'" v-for="(item, index) in recList" :key="item.id">
        <div class="top">
          <div class="left">
            <p>{{ item.workName }} [{{ item.place||'长沙' }}]</p>
            <p>
              <span style="font-weight: 600; color: red" class="small"
                >{{ item.salary/1000 }}k</span
              >
              <span class="small">{{ item.experience }}年以上</span>
              <span class="small">|</span>
              <span class="small">{{ item.degree }}</span>
            </p>
          </div>

          <div class="right">
            <p>{{ '博士集团' }}</p>
            <div class="right-content">
              <p>
                <span class="small">{{ item.workKind }}</span>
                <span class="small">|</span>
                <span class="small">{{ item.personNum }}人以下</span>
                <span class="small">|</span>
              </p>
            </div>
          </div>
          <div class="avatar">
            <img src="@/assets/img/tencent.jpg" alt="">
          </div>
          <!-- <div id="avatar">
            <el-avatar
              size="large"
              shape="square"
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            ></el-avatar>
          </div> -->
        </div>

        <div class="bottom">
          <span class="small2" v-for="item in tags" :key="item">{{item}}</span>
        </div>
      </div>
    </main>
<!--    详情页-->
    <rec-details ref="recDetails" v-else></rec-details>
  </div>
</template>

<script>
import { ref} from "@vue/composition-api";
import {getRecList,getRecUnit} from "@/network/recruitment"
import recDetails from "@/views/Home/Recruitment/recDetails";
export default {
  components:{
    recDetails
  },

  data(){
    return{
      isDetails:false
    }
  },
  methods:{
    getDetails(id) {
      this.isDetails=true
      console.log(this.$refs)
    }
  },
  setup() {
    const recList = ref([]);
    const tags = ["五险一金", "双休"];
    const value1=ref('')
    const getData=()=>{
      getRecList().then(res=>{
        let {recruitments}=res.data.extend
        recList.value=recruitments
        console.log("拉取数据成功");
      })
    }
    //进入详情,通过index确定是哪个展开

    getData()

    return {
      recList,value1,tags
    }
  },

};
</script>

<style scoped>
header {
  box-sizing: border-box;
  padding: 10px 10px;
  width: 100%;
  height: 120px;
  background-color: #fff;
}
.select {
  width: 20%;
  margin-right: 2%;
  font-size: 10px;
}
main {
  width: 100%;
  height: 100%;
}
.recBox {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
  height: 140px;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.8);
  margin-top: 10px;
  color: rgb(179, 128, 124);
  transition:height .3s;
}
.recBoxs {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
  height: 340px;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.8);
  margin-top: 10px;
  color: rgb(179, 128, 124);
  transition:height .3s;
}
.recBox:hover{
  cursor: pointer;
}
.top {
  height: 80%;
  width: 100%;
  padding-left: 10px;
  /*background-color: blue;*/
}
.left {
  float: left;
  width: 45%;
}
.right {
  width: 38%;
  float: left;
}
/*.right-content{*/
/*  width: 100%;*/
/*  height: 30%;*/
/*  display: flex;*/
/*  flex-direction: row;*/
/*}*/
.small {
  margin-right: 5%;
}
.small2 {
  float: left;
  display: block;
  margin-right: 20px;
  font-size: 12px;
}
.avatar {
  height: 100%;
  display: flex;
  justify-content: left;
  align-items: center;
}
.avatar img{
  width: 55%;
  height: 55%;
  border-radius: 6px;
}
.bottom {
  background-color: rgb(248, 249, 252);
  width: 100%;
  bottom: 0;
  padding-left: 10px;
  height: 20%;
  display: flex;
  justify-content: left;
  align-items: center;
}
.bottom span {
}
#place {
  flex: 1;
  margin-left: 5%;
}

@media screen and (max-width: 500px) {
  header {
    box-sizing: border-box;
    padding: 10px 10px;
    width: 100vw;
    height: 100px;
    background-color: #fff;
  }
  .recBox {
    font-size: 12px;
    width: 100vw;
    height: 100px;
  }
  #avatar {
    display: none;
  }
}
</style>
